<template>
  <div class="lg n-login-scan" style="min-height:332px">
    <div class="cnt">
       <!-- 登陆初始页面 -->
      <div class="main j-flag" v-show="loginFlag">
        <div class="f-cb">
          <div class="phone"></div>
          <div class="right">
            <div class="title">扫码登录</div>
            <div class="qr">
              <div class="tip f-dn f-link j-flag f-hide" v-show="!imgurl">
                <p>二维码已失效</p>
                <a class="u-btn2" href="javascript:;" @click.stop="login">点击刷新</a>
              </div>
              <div v-if="imgurl">
                 <img :src="imgurl" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 扫描还未确定页面 -->
      <div class="suc j-flag" v-show="!loginFlag ">
         <div class="suc-icon"></div>
         <p class="suc-txt">扫描成功</p>
      </div>
      <div id="otherbtn" class="otherbtn" v-show="loginFlag"><a class="u-btn2 other" data-action="switch" @click.stop="$parent.changeView(1)">选择其他登录模式</a></div>
    </div>
  </div>
</template>
<script>
import {LoginStatus , QRKey ,QRcreate, QRcheck} from './../../../network/login'
import store from "../../../store/index"
export default {
 data() {
     return {
         imgurl : true,
         time:null,
         loginFlag:true
     }
 },
 methods:{
      QRcheckStatus(key){         //检查二维码目前状态
       QRcheck(key).then(res => {
        if (res.data.code === 800){ //,800为二维码过期
           this.loginFlag = true
            clearInterval(this.time)
          }
           if (res.data.code === 802) { //802为待确认
            this.loginFlag = false
            this.imgurl = null
          }
           if (res.data.code === 803) { //803为授权登录成功
            // 这一步会返回cookie
            clearInterval(this.timer)
              this.status()
          }
       })
     },
    status(){                //登录状态
     LoginStatus().then(res => {
        if(res.data.data.account){
          console.log("扫码登录完成")
          store.dispatch("user" , res.data.data.account.id)
          store.dispatch("private" , {limit :30 , offset : 0})
          this.$parent.close()
        }else{
           console.log("扫码还未登录")
        }
     })
    },
    login(){
       this.status()           //获取登录key
       QRKey().then(res => {
          this.loginQR_create(res.data.data.unikey)
       })
    },
    loginQR_create(key){       //生成登录二维码
        QRcreate(key).then(res =>{
            this.imgurl = res.data.data.qrimg
            this.loginFlag = true
        })
        this.time = setInterval(() => {
            this.QRcheckStatus(key)
        }, 2000);
    }
  
 },
  created() {
    this.login()
  },
};
</script>
<style scoped>
.lg {
  width: 530px;
  min-height: 286px;
  margin: auto;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  background-color: #fff;
}
.n-login-scan .cnt {
  margin: 0 auto;
  padding: 38px 0 20px;
  text-align: center;
}
.n-login-scan .main {
  position: relative;
  margin: 0 auto;
}
.f-cb::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.n-login-scan .main .phone {
  float: left;
  margin-left: 101px;
  width: 125px;
  height: 220px;
  background: url("https://s2.music.126.net/style/web2/img/qr_guide.png?b854f2119316d3e10bba344ee502e825");
  background-size: contain;
}
.n-login-scan .right {
  float: left;
  margin-left: 25px;
}
.n-login-scan .main .qr {
  background: #fff;
  width: 130px;
  height: 130px;
  padding: 4px;
  margin: 13px auto;
  position: relative;
}
.n-login-scan .main .tip {
     background: rgba(255, 255, 255, 0.9);
    z-index: 1;
    font-size: 14px;
}
.f-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.n-login-scan .main .tip p {
    margin: 45px auto 6px;
    font-size: 12px;
    color: rgba(0,0,0,0.80);
    font-weight: 500;
}
.n-login-scan .main .tip a {
    display: block;
    margin: 0 auto;
    padding-right: 0;
    width: 64px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 4px;
    background: linear-gradient(180deg, #81DD81 0%, #55A055 100%);
    border: 1px solid #5BAF5B;
    box-shadow: inset 0 -1px 1px 1px rgb(185 230 185 / 31%);
    color: #fff;
    font-size: 12px;
}
.n-login-scan .suc {
    color: #999;
    width: 100%;
}
.n-login-scan .suc-icon {
    width: 140px;
    height: 140px;
    background: url("./../../../assets/imgs/succese.png");
    background-size: contain;
    margin: 0 auto;
}
.n-login-scan .suc-txt {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 450;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.8);
}
.n-login-scan .otherbtn {
    height: 28px;
}
.n-login-scan .other {
    display: block;
    width: 118px;
    height: 100%;
    margin: 20px auto 0;
    padding-right: 0;
    font-size: 12px;
    border: 1px solid #979797;
    border-radius: 15px;
    line-height: 28px;
    text-align: center;
    color: rgba(0,0,0,0.80);
    cursor: pointer;
}
.u-btn2, .u-btn2:hover {
    text-decoration: none;
}
.u-btn2 {
    padding: 0 5px 0 0;
    white-space: nowrap;
}
</style>